<template>
<view class="tour-intro">
  <tabs
    sticky
    :stickyTop="navHeight"
    :tabsList="[{label: '商品描述'}, {label: '费用说明'}, {label: '取消政策'}]"
    @change="handleTabChange">
    <view class="tab-item" :id="'tabs-scroll-'+0">
      <template v-for="(item, index) in infoConfig.desc">
        <view v-if="renderData[item.key]" :key="index" class="intro-item">
          <view class="title">{{item.title}}</view>
          <rich-text class="content" :nodes="renderData[item.key]" />
        </view>
      </template>
      
    </view>
    <view class="tab-item" :id="'tabs-scroll-'+1">
      <template v-for="(item, index) in infoConfig.fee">
        <view v-if="renderData[item.key]" :key="index" class="intro-item">
          <view class="title">{{item.title}}</view>
          <rich-text class="content" :nodes="renderData[item.key]" />
        </view>
      </template>
    </view>

    <view class="tab-item" :id="'tabs-scroll-'+2">
      <template v-for="(item, index) in infoConfig.policy">
        <view v-if="renderData[item.key]" :key="index" class="intro-item">
          <view class="title">{{item.title}}</view>
          <rich-text class="content" :nodes="renderData[item.key]" />
        </view>
      </template>
    </view>
  </tabs>
</view>
  
</template>
<script>

import tabs from '@/components/business/tabs'
import tabItem from '@/components/business/tab-item'
import sdk from 'sdk'

export default {
  name: 'tour-intro',
  components: { tabs, tabItem },

  props: {
    product: {
      type: Object,
      required: true
    },
    navHeight: {
      type: [String, Number],
      default: ''
    }
  },

  data() {
    return {
      renderData: {
        journey: '',
        useMethod: '',
        bookDeclarePortal: '',
        costInfo: '',
        refundPolicy: ''
      },
      infoConfig: {
        desc: [
          {title: '商品详情', key: 'journey'},
          {title: '使用方法', key: 'useMethod'},
          {title: '预订说明', key: 'bookDeclarePortal'}
        ],
        fee: [
          {title: '费用说明', key: 'costInfo'}
          
        ],
        policy: [
          {title: '取消政策', key: 'refundPolicy'}
        ]
      }
    }
  },

  created() {
    this.initData()
  },

  methods: {
    initData() {
      this.renderData.journey = this.product.journey && this.product.journey.replace(/<\/br>/g, '<br/>')

      this.renderData.useMethod = this.product.useMethod && this.product.useMethod.replace(/<\/br>/g, '<br/>')

      this.renderData.bookDeclarePortal = this.product.useMethod && this.product.useMethod.replace(/<\/br>/g, '<br/>')

      this.renderData.costInfo = ''
      if (this.product.costInclude) {
        this.renderData.costInfo += `
        <h6>费用包含：</h6>
        ${this.product.costInclude}`
      }

      if (this.product.costNotInclude) {
        this.renderData.costInfo += `
        <h6>费用不含：</h6>
        ${this.product.costNotInclude}`
      }
      
      if (this.product.cancellationRulesStr && this.product.cancellationRulesStr.length) {
        let cancelRules =  this.product.cancellationRulesStr.map((str, index) => {
          if (index <= 0) return str
          else return `
          ${str}`
        }).join('')

        if (this.product.refundPolicy) {
          this.renderData.refundPolicy = cancelRules + `
          ${this.product.refundPolicy}`
        } else {
          this.renderData.refundPolicy = cancelRules
        }
      }
    },

    handleTabChange(index, tabBarHeight) {
      sdk.getOffset('#tabs-scroll-' + index, null , this).then(res => {
        res && this.$emit('change', res.top - tabBarHeight)
      })
    }
  }
}
</script>
<style lang="less">
.tour-intro {
  background: #ffffff;
  margin-top: 40rpx;
  border-top: 20rpx solid #f5f5f5;
  
  .label-title {
    @height: 50rpx;

    .flex;
    .flex-middle;

    img {
      width: @height;
      height: @height;
    }

    .title {
      height: @height;
      line-height: @height;
      margin-left: 14rpx;

      font-size: 36rpx;
      font-weight: bold;
    }
  }

  .tab-item {
    margin: 30rpx 0;
  }

  .intro-item {
    line-height: 40rpx;
    margin-bottom: 40rpx;

    .title {
      font-size: 30rpx;
      font-weight: bold;
      margin-bottom: 10rpx;
    }

    .content {
      font-size: 28rpx;
      text-align: justify;
    }
  }
}
</style>